<template>
	<view class="page-view">
		<navBar title="设备日常巡检"></navBar>
		<view class="bgfff mb-16rpx pb-32rpx">
			<view class="w-100% h-88rpx flex-space-between">
				<view class="flex-wrap-left navigation-little-title ml-32rpx">
					<view class="w-4rpx h-28rpx mr-8rpx title-line"></view>设备信息
				</view>
			</view>
			<view class="w-100% h-1rpx" style="background-color: #E7ECED;"></view>
			<sanCode :equpInfo="{}" :deviceCode="deviceCode" :isDisabled="false" :query-api="getEqupInspection" :data="'equpNo'" @confirmCode="confirmCode" :class="isInfoShow?'mb-38rpx':''"></sanCode>
			<view class="flex-space-between ml-48rpx mr-48rpx device-view" v-if="isInfoShow">
				<view class="text-view">
					<label for="">设备型号：</label>
					<text class="u-line-1">{{equpInfo.specificationAndModel}}</text>
				</view>
				<view class="text-view">
					<label for="">工序描述：</label>
					<text class="u-line-1">{{equpInfo.processDesc}}</text>
				</view>
			</view>
		</view>
		<view class="bgfff mb-16rpx">
			<view class="w-100% h-88rpx flex-space-between">
				<view class="flex-wrap-left navigation-little-title ml-32rpx">
					<view class="w-4rpx h-28rpx mr-8rpx title-line"></view>巡检内容
				</view>
			</view>
			<view class="w-100% h-1rpx" style="background-color: #E7ECED;"></view>
			<view class="flex-space-between ml-48rpx mr-48rpx mt-24rpx pb-35rpx">
				<textarea v-model="inspectInfo.checkNote" placeholder-style="color:#CACACA" placeholder="请输入巡检内容" />
			</view>
		</view>
		<view class="bgfff mb-120rpx pb-32rpx">
			<view class="w-100% h-88rpx flex-space-between">
				<view class="flex-wrap-left navigation-little-title ml-32rpx">
					<view class="w-4rpx h-28rpx mr-8rpx title-line"></view>巡检结果
				</view>
			</view>
			<view class="w-100% h-1rpx" style="background-color: #E7ECED;"></view>
			<view class="h-88rpx flex-space-between enterInfo-view">
				<view class="flex-wrap-left text-view ">
					<label for="">巡检结果：</label>
					<view class="flex-wrap-left">
						<view class="flex-space-between mr-54rpx ml-30rpx">
							<image class="w-40rpx h-40rpx mr-10rpx" src="@/static/radio-no-checked.png" mode="" v-if="!inspectInfo.is_result" @click="inspectInfo.is_result = !inspectInfo.is_result"></image>
							<image class="w-40rpx h-40rpx mr-10rpx" src="@/static/radio-checked.png" mode="" v-else></image>
							<text>正常</text>
						</view>
						<view class="flex-space-between">
							<image class="w-40rpx h-40rpx mr-10rpx" src="@/static/radio-no-checked.png" mode="" v-if="inspectInfo.is_result" @click="inspectInfo.is_result = !inspectInfo.is_result"></image>
							<image class="w-40rpx h-40rpx mr-10rpx" src="@/static/radio-checked.png" mode="" v-else></image>
							<text>异常</text>
						</view>
					</view>
				</view>
			</view>
			<view class="flex-space-between mt-32rpx mb-32rpx enterInfo-view" :class="{noResult:inspectInfo.is_result}">
				<view class="flex-wrap-left text-view ">
					<label class="mb-18rpx">异常描述：</label>
					<view class="flex-wrap-left">
						<textarea v-model="inspectInfo.exceptionDesc" :disabled="inspectInfo.is_result" placeholder-style="color:#CACACA" placeholder="请输入详细描述设备异常问题" />
					</view>
				</view>
			</view>
			<view class="flex-space-between mt-32rpx enterInfo-view" :class="{noResult:inspectInfo.is_result}">
				<view class="flex-wrap-left text-view ">
					<label class="mb-18rpx">处理方法：</label>
					<view class="flex-wrap-left">
						<textarea v-model="inspectInfo.handleOpinions" :disabled="inspectInfo.is_result" placeholder-style="color:#CACACA" placeholder="请输入处理方法" />
					</view>
				</view>
			</view>
		</view>	
	
		<view class="suctionbottom">
			<view v-if="isSubmit && isInfoShow && inspectInfo.checkNote && (inspectInfo.is_result || (!inspectInfo.is_result && inspectInfo.exceptionDesc && inspectInfo.handleOpinions))" class="yes button"  @click="submitBtn">
				提交
			</view>
			<view v-else class="no button">
				提交
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
import navBar from '@/components/navbar.vue'
import sanCode from '@/components/deviceSanCode.vue'
// import { onShow, onReachBottom } from "@dcloudio/uni-app"
import { ref, watch,onMounted,reactive,nextTick } from 'vue'
import { setEqupInspection, getEqupInspection } from '@/common/api/keepPlan'
const inspectInfo = ref({
	is_result:true,
	"checkNote": "",
	"checkType": "1",
	"exceptionDesc": "",
	"handleOpinions": ""
})
const deviceCode = ref<string>('');
const isInfoShow = ref<boolean>(false);
const isSubmit = ref<boolean>(true);
const equpInfo = ref({
	"barcode": "",
	"equipmentName": "",
	"equipmentType": "",
	"processDesc": "",
	"selfNumbering": "",
	"specificationAndModel": ""
});
// onMounted(()=>{
// 	const query = uni.createSelectorQuery();
// 	query.select('.page-view').boundingClientRect(data => {
// 		scrollViewHeight.value = data.height - 112;
// 	}).exec();
// })
const confirmCode = (data)=>{
	isInfoShow.value = true
	equpInfo.value = data;
}
//提交
const submitBtn = ()=> {
	isSubmit.value = false;
	let params = {
		...equpInfo.value,
		...inspectInfo.value,
		checkType:inspectInfo.value.is_result?1:2
	}
	delete params.is_result
	setEqupInspection(params).then(res=>{
		isSubmit.value = true;
		if(res.code ===2000){
			uni.showToast({
				title: res.msg,
				icon: 'none',
			});
			uni.redirectTo({
				url: '/pages/homePage/index',
			});
		}
	})
}
</script>

<style lang="scss" scoped>
	.page-view{
		background-color: #f5f5f5;
		height: 100%;
		overflow-y: auto;
	}
	.bgfff{
		background-color: #fff;
	}
	.navigation-little-title {
		font-size: 28rpx;
		font-family: PingFangSC-Semibold, PingFang SC;
		font-weight: 600;
		color: #0F1F2D;
		line-height: 28rpx;
	}
	uni-textarea{
		width: 654rpx;
		height: 118rpx;
	}
	::v-deep .uni-textarea-placeholder{
		// z-index: 9;
		font-size: 24rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #CACACA;
		padding: 20rpx;
	}
	::v-deep .uni-textarea-textarea{
		width: 654rpx;
		height: 118rpx;
		border-radius: 2rpx;
		border: 1rpx solid #DDDDDD;
		padding: 20rpx;
		box-sizing: border-box;
	}
	.uni-textarea-wrapper{
		padding: 20rpx;
		box-sizing: border-box;
	}
	.item-view{
		label{
			width: 120rpx;
			font-size: 24rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #4B4D55;
			line-height: 32rpx;
		}
		.form-input{
			width: calc(100% - 120rpx);
			height: 88rpx;
			background: #FFFFFF;
			border-radius: 2rpx;
			border: 1rpx solid #DDDDDD;
			padding: 0 24rpx;
			position: relative;
			.uni-input-form{
				font-size: 24rpx;
				
			}
			.uni-input-placeholder{
				font-size: 22rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #CACACA;
			}
			.qr-img,.date-text{
				position: absolute;
				top: 22rpx;
				right: 24rpx;
			}
			.date-text{
				color: #2F7BFF;
			}
		}
	}
	.device-view{
		.text-view{
			width: 50%;
			font-size: 24rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #4B4D55;
			label{
				width: 120rpx;
			}
			text{
				display: inline-block;
				max-width: calc(100% - 130rpx);
				vertical-align: text-bottom;
			}
		}
	}
	.enterInfo-view{
		margin-left:48rpx;
		margin-right:48rpx;
		.text-view{
			label{
				font-size: 24rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: rgba(30,31,34,0.85);
			}
			text{
				font-size: 24rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: rgba(0,0,0,0.85);
			}
			::v-deep .u-input{
				width: 534rpx;
				height: 88rpx;
				background: #FFFFFF;
				border-radius: 2rpx;
				border: 1rpx solid #DDDDDD;
				.u-input__input{
					height: 100%;
					padding-left: 24rpx;
				}
				.uni-input-placeholder{
					font-size: 22rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #CACACA;
				}
			}
		}
	}
	.noResult{
		.text-view label{
			color: #CACACA;
		}
	}
	.suctionbottom .button {
		width: 100%;
		height: 88rpx;
		border-radius: 4rpx;
		font-size: 32rpx;
		font-family: PingFangSC-Semibold, PingFang SC;
		font-weight: 600;
		line-height: 84rpx;
		text-align: center;
	}
	.suctionbottom .no {
		background: #99beff;
		border: 1rpx solid #99beff;
		color: #FFFFFF;
	}
	.suctionbottom .yes {
		background: #2F7BFF;
		border: 1rpx solid #2F7BFF;
		color: #FFFFFF;
	}
	
	.suctionbottom .yes:active {
		background: #99beff;
		border: 1rpx solid #99beff;
		color: #FFFFFF;
	}
</style>
